<template>
    <view class="pages-equity-notice-detail">
        <u-parse :content="content"></u-parse>

        <view class="message-list">
            <view class="message-list--title">
                <text class="line-before"> </text>
                <text>我的留言</text>
            </view>
            <view class="message-list--content">
                <x-list ref="xlist" @load="load">
                    <template #item="{ item, index, total }">
                        <MessageItem :item="item" :index="index" :total="total"
                            @message-send="handleToPage('/pages/equity-sub/message/send', { notice_id: 1, equity_config_id: 1, message_type: 'notice', message_id: item.id })" />
                    </template>
                </x-list>
            </view>
        </view>
    </view>
</template>

<script>
    import dataList from '@/data/list.json'
    import MessageItem from '../components/message-item.vue'
    export default {
        components: {
            MessageItem,
        },
        data() {
            return {
                content: `
					<p style="text-align: center;font-size: 18px;font-weight: 600;color:#000000;">2024届学生毕业及离校相关工作安排来啦</p>
					<p style="text-align: center;color: #999999;">2025-01-15</p>
					<p style="text-align: center;">露从今夜白，月是故乡明</p>
					<p style="text-align: center;">在这个特别的季节里，</p>
					<p style="text-align: center;">我们不仅要搞别同窗，</p>
					<p style="text-align: center;">更要告别那段青涩的岁月。</p>
					<p style="text-align: center;">但请记住，毕业不是结束，</p>
					<p style="text-align: center;">而是新的开始。</p>
					<p style="text-align: center;">未来的路上，无论我们走到哪里，</p>
					<p style="text-align: center;">母校都是我们永远的港湾。</p>
					<p style="text-align: center;">让我们怀揣着梦想，勇敢前行，</p>
					<p style="text-align: center;">用我们的努力和成就，</p>
					<p style="text-align: center;">为母校增光添彩。</p>
					<p style="text-align: center;">愿每一位毕业生前程似锦，未来可期。</p>
					<p style="text-align: center;">再见不是告别，而是重逢的约定。</p>
					<p style="text-align: center;">让我们共同期待下一次花开时节，</p>
					<p style="text-align: center;">再回母校，重温那段难忘的青春岁月。</p>
					<img src="/static/images/equity-banner.png" style="width: 100%; height: 100%;" />
				`,
            }
        },
        onLoad() {
            uni.setNavigationBarTitle({
                title: '毕业生优惠公告'
            });
        },
        methods: {
            load({ page, pageSize }) {
                this.$refs.xlist.success(dataList.data)
                // this.$refs.xlist.fail()
            },
            handleToPage(path, params = {}) {
                uni.$u.route({
                    url: path,
                    params: params
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .pages-equity-notice-detail {
        padding: 20rpx;
        background-color: #f8f8f8;
        position: relative;

        .btn-box {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: transparent;

            &--content {
                display: flex;
                gap: 20rpx;
                width: calc(100% - 40rpx);
                margin: 20rpx;
            }
        }

        .message-list {
            &--title {
                display: flex;
                padding: 30rpx 0;
                align-items: center;
                border-top: 1px solid #f8f8f8;
                border-bottom: 1px solid #f8f8f8;
                background-color: #ffffff;
                font-weight: 400;
                font-size: 32rpx;
                color: #000000;
                line-height: 36rpx;

                .line-before {
                    display: inline-block;
                    height: 36rpx;
                    width: 6rpx;
                    margin-right: 10rpx;
                    background: #2DCC75;
                    border-radius: 2rpx;
                }
            }
        }
    }
</style>
